﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="/Scripts/lib/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="/Scripts/lib/jquery.json.min.js" type="text/javascript"></script>

    <script src="/Scripts/lib/jquery.bindTools.js" type="text/javascript"></script>

    <link href="../../sample.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript">
        var datas = [];
        for (var i = 0; i < 10; i++) {
            datas.push({
                "sex": i % 2 == 0 ? "female" : "male",
                "name": "name" + i,
                "phone": "phone" + i
            });
        }


        $(document).ready(function() {
            $("#demo1").bindTool(
                {
                    template: $($("#template").html()),
                    way: [
                        { member: "sex", to: "#sex" },
                        { member: "phone", to: "#phone" },
                        { member: "name", to: "#name" }
                    ],
                    editTemplate:
                    {
                        template: $($("#editTemplate").html()),
                        way: [
                            { member: "sex" },
                            { member: "phone" },
                            { member: "name" }
                        ],
                        onBind: function(json) {
                            $(this).data('current', json);
                        }
                    },
                    detialTemplate:
                    {
                        template: $($("#detialTemplate").html()),
                        way: [
                            { member: "sex" },
                            { member: "phone" },
                            { member: "name" }
                        ],
                        onBind: function(json) {
                            $(this).data('current', json);
                        }
                    }

                });
            $("#demo1").bindTool('bind', datas);

            $(".getJsonObject").live("click", function() {
                var jsion = $("#demo1").bindTool("collect", $(this).closest("tr"));
                alert($.toJSON(jsion));
            });
            $(".save").live("click", function() {
                $("#demo1").bindTool("switch", "template", $(this).closest("tr"));
            });

            $(".edit").live("click", function() {
                $("#demo1").bindTool('switch', 'editTemplate', $(this).closest("tr"));
            });
            $(".cancel").live('click', function() {
                var area = $(this).closest("tr");
                var srcObj = area.data('current');
                $("#demo1").bindTool('bind', srcObj, area);
                $("#demo1").bindTool('switch', 'template', area);
            });

            $(".detial").live('click', function() {
                var area = $(this).closest("tr");
                $("#demo1").bindTool('switch', 'detialTemplate', area);
            });
            $(".simple").live('click', function() {
                var area = $(this).closest("tr");
                $("#demo1").bindTool('switch', 'editTemplate', area);
            });

        });
    </script>

    <style type="text/css">
        #data
        {
            width: 368px;
        }
        .save, .edit, .cancel, .detial, .simple
        {
            cursor: pointer;
        }
    </style>

    <script type="jquery-template" id="template">
         <tr id="show">
            <td>
                <a class="getJsonObject" href="###">GetJson</a>
                <a class="edit" href="###">edit</a>
            </td>
            <td id="name">
            </td>
            <td id="sex">
            </td>
            <td id="phone">
             <td>
        </tr>
    </script>

    <script type="jquery-template" id="editTemplate">
         <tr>
            <td>
                <a class="cancel">Cancel</a>
                <a class="save">save</a>
                <a class="detial">detial</a>
                  <a class="getJsonObject" href="###">GetJson</a>
            </td>
            <td>
                <input name="name" type="text"/>            
            </td>
                <select name="sex">
                    <option value="male">male</option>
                    <option value="female">female</option>
                </select>            
            </td>
            <td>
                <input name="phone" type="text"/>
            </td>
        </tr>
    </script>

    <script type="text/bindTool-template" id="detialTemplate">
         <tr>
            <td colspan="4">
                <div>
                    <label for="nameId">name</label>
                    <input name="name" type="text" id="nameId"/>                    
                </div>
                <div>
                 <label for="sexId">sex</label>
                    <select name="sex" id="sexId">
                        <option value="male">male</option>
                        <option value="female">female</option>
                    </select>            
                </div>
                <div>
                <label for="phoneId">phone</label>
                    <input name="phone" type="text" id="phoneId"/>
                </div>       
                <div>
                    <a class="cancel">Cancel</a>
                    <a class="save">save</a>
                    <a class="simple">simple</a>
                      <a class="getJsonObject" href="###">GetJson</a>
                </div>     
        </tr>
    </script>

</head>
<body>
    <table id="demo1" style="float: left; width: 550px">
        <thead>
            <tr>
                <td>
                </td>
                <td>
                    name
                </td>
                <td>
                    sex
                </td>
                <td>
                    phone
                </td>
            </tr>
        </thead>
    </table>
    <div style="width: 378px">
        &nbsp;
    </div>
</body>
</html>
